<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>支付成功</span>
          </div>
          <div style="margin-bottom: 50px">
            <div style="width: 15%; float: left">
              <img src="@/assets/success.png" alt="404" />
            </div>
            <div style="width: 80%; float: left">
              <el-table
                v-loading="listLoading"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%; margin-top: 2%"
              >
                <el-table-column
                  align="center"
                  label="读者证号"
                  min-width="100px"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.cardId }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="借阅流水号"
                  min-width="100px"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.lendId }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="图书编码"
                  min-width="100px"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.bookId }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="图书名称"
                  min-width="100px"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="图书类别"
                  min-width="100px"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.className }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="借阅日期"
                  min-width="100px"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.lendDate }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="归还日期"
                  min-width="100px"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.backDate }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-col style="margin-top: 1%" :span="24" class="text-center">
                <el-button type="primary" @click="refresh">继续借阅</el-button>
                <el-button type="primary" @click="refresh">关闭页面</el-button>
              </el-col>
            </div>
          </div>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Page404',
  data() {
    return {
      list: null,
      listLoading: false
    };
  },
  computed: {
    message() {
      return '小伙伴，您已支付成功，请选择继续归还图书或者返回主页面！'
    }
  },
  created() {
    var chkObj = {
      charset: this.getQueryString('charset'),
      out_trade_no: this.getQueryString('out_trade_no'),
      total_amount: this.getQueryString('total_amount'),
      method: this.getQueryString('method'),
      sign: this.getQueryString('sign'),
      trade_no: this.getQueryString('trade_no'),
      auth_app_id: this.getQueryString('auth_app_id'),
      version: this.getQueryString('version'),
      app_id: this.getQueryString('app_id'),
      sign_type: this.getQueryString('sign_type'),
      seller_id: this.getQueryString('seller_id'),
      timestamp: this.getQueryString('timestamp')
    }
    this.$post('study/aliPay/return_url', { ...chkObj }).then(res => {
      this.list = res.data.resultBody.lendMsg
    })
  },
  methods: {
    refresh() {
      this.$store
        .dispatch('tagsView/delCachedView', '/library/lend')
        .then(() => {
          var fullPath = '/library/lend';
          this.$nextTick(() => {
            this.$router.replace({
              path: '/redirect' + fullPath
            });
          });
        });
    },
    getQueryString(name, search) {
      search = search || window.location.search.substr(1) || window.location.hash.split('?')[1];
      const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
      const r = search.match(reg);
      if (r != null) return unescape(r[2]); return null;
    }
  }

}
</script>

<style lang="scss" scoped>
.wscn-http404-container {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 40%;
  left: 50%;
}
.wscn-http404 {
  position: relative;
  width: 1200px;
  padding: 0 50px;
  overflow: hidden;
  .pic-404 {
    position: relative;
    float: left;
    width: 600px;
    overflow: hidden;
    &__parent {
      width: 100%;
    }
    &__child {
      position: absolute;
      &.left {
        width: 80px;
        top: 17px;
        left: 220px;
        opacity: 0;
        animation-name: cloudLeft;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      &.mid {
        width: 46px;
        top: 10px;
        left: 420px;
        opacity: 0;
        animation-name: cloudMid;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;
      }
      &.right {
        width: 62px;
        top: 100px;
        left: 500px;
        opacity: 0;
        animation-name: cloudRight;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      @keyframes cloudLeft {
        0% {
          top: 17px;
          left: 220px;
          opacity: 0;
        }
        20% {
          top: 33px;
          left: 188px;
          opacity: 1;
        }
        80% {
          top: 81px;
          left: 92px;
          opacity: 1;
        }
        100% {
          top: 97px;
          left: 60px;
          opacity: 0;
        }
      }
      @keyframes cloudMid {
        0% {
          top: 10px;
          left: 420px;
          opacity: 0;
        }
        20% {
          top: 40px;
          left: 360px;
          opacity: 1;
        }
        70% {
          top: 130px;
          left: 180px;
          opacity: 1;
        }
        100% {
          top: 160px;
          left: 120px;
          opacity: 0;
        }
      }
      @keyframes cloudRight {
        0% {
          top: 100px;
          left: 500px;
          opacity: 0;
        }
        20% {
          top: 120px;
          left: 460px;
          opacity: 1;
        }
        80% {
          top: 180px;
          left: 340px;
          opacity: 1;
        }
        100% {
          top: 200px;
          left: 300px;
          opacity: 0;
        }
      }
    }
  }
  .bullshit {
    position: relative;
    float: left;
    width: 300px;
    padding: 30px 0;
    overflow: hidden;
    &__oops {
      font-size: 32px;
      font-weight: bold;
      line-height: 40px;
      color: #1482f0;
      opacity: 0;
      margin-bottom: 20px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
    }
    &__headline {
      font-size: 20px;
      line-height: 24px;
      color: #222;
      font-weight: bold;
      opacity: 0;
      margin-bottom: 10px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.1s;
      animation-fill-mode: forwards;
    }
    &__info {
      font-size: 13px;
      line-height: 21px;
      color: grey;
      opacity: 0;
      margin-bottom: 30px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.2s;
      animation-fill-mode: forwards;
    }
    &__return-home {
      display: block;
      float: left;
      width: 110px;
      height: 36px;
      background: #1482f0;
      border-radius: 100px;
      text-align: center;
      color: #ffffff;
      opacity: 0;
      font-size: 14px;
      line-height: 36px;
      cursor: pointer;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.3s;
      animation-fill-mode: forwards;
    }
    @keyframes slideUp {
      0% {
        transform: translateY(60px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}
</style>
